<template>
  <el-container class='wrapper'>
    <!-- 左侧导航栏 -->
  <el-aside width="200px" class='menu'>
    <span class='iconfont iconnew'></span>
    <!-- 导航栏宽度直接把栅格占比改成24就能占满整个父盒子 -->
    <el-col :span="24">
    <el-menu
      :router="true"
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff">
      <el-menu-item index='/publish'>
        <i class="el-icon-edit-outline"></i>
        <span slot="title">文章发表</span>
      </el-menu-item>
       <el-menu-item index='/compile'>
        <i class="el-icon-edit"></i>
        <span slot="title">文章编辑</span>
      </el-menu-item>
    </el-menu>
  </el-col>
</el-row>
  </el-aside>
  <el-container>
    <!-- 头部 -->
    <el-header>
       <img v-if="user.head_img" class='avatar' :src="'http://127.0.0.1:3000'+user.head_img" alt="">
      <img v-else class='avatar' src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2414389704,3738340956&fm=26&gp=0.jpg" alt="">
      <div class='username'>{{user.nickname}}</div>
      <div class='logout' @click="logoutBtn">退出登录</div>
    </el-header>
    <!-- 主体容器 -->
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
</template>

<script>
export default {
  data() {
    return {
      user: JSON.parse(localStorage.getItem('user'))
    }
  },
  mounted() {
    // console.log(this.$route.matched)
  },
  methods: {
    // 导航栏设置
    jumPage(path) {
      // 如果点击的还是点前路由 就不执行
      if (this.$route.path == path) {
        return
      } else {
        this.$router.push(path)
      }
    },
    // 退出功能
    logoutBtn() {
      // console.log('退出了')
      if (confirm('你确定要退出吗?')) {
        this.$router.push('/login')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.wrapper {
  height: 100vh;
  .iconnew {
    font-size: 5.33vw;
    color: orangered;
  }
}
.el-menu-item {
  width: 200px;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  .avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
  }
  .username {
    margin-right: 10px;
    color: greenyellow;
  }
  .logout:hover {
    cursor: pointer;
    color: orange;
  }
}

.el-aside {
  background-color: #545c64;
  color: #333;
  text-align: center;
  // line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  // text-align: center;
  // line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}
</style>
